<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="utf-8">
		<title>菜单管理</title>
		<link href="/pear_layui/component/pear/css/pear.css" rel="stylesheet" />
		<style>
			/* zdy主题风格*/
			.dtree-zdy-item-this{background-color: #c2c2c2!important;} /* 当前选中行样式*/
			.dtree-zdy-item:hover{background-color: #f2f2f2!important;} /* 行悬停样式*/
			.dtree-zdy-item cite{font-size:14px!important;} /* 行文字样式*/
			.dtree-zdy-item:hover cite{color:#5FB878!important;} /* 行悬停文字样式*/
			.dtree-zdy-dtreefont{font-size: 18px!important;} /* 一级图标、二级图标、复选框样式*/
			.dtree-zdy-ficon{color:#009f95!important;}  /*一级图标特定样式*/
			.dtree-zdy-icon{color:#009f95!important;}  /*二级图标特定样式*/
			.dtree-zdy-checkbox:hover{color:#5FB878!important;}  /*复选框悬停样式*/
			.dtree-zdy-choose{color:#5FB878!important;} /* 复选框选中样式*/
		</style>
	</head>
	<body class="pear-container">
		<!--查询条件-->
		<div class="layui-card">
			<div class="layui-card-body">
				<form class="layui-form" action="">
					<div class="layui-form-item">
						<div class="layui-form-item layui-inline">
							<label class="layui-form-label">名称</label>
							<div class="layui-input-inline">
								<input type="text" name="title" class="layui-input">
							</div>
						</div>
						<div class="layui-form-item layui-inline">
							<label class="layui-form-label">编码</label>
							<div class="layui-input-inline">
								<input type="text" name="code" class="layui-input">
							</div>
						</div>
						<div class="layui-form-item layui-inline">
							<button class="pear-btn pear-btn-md pear-btn-primary" lay-submit lay-filter="menu-query">
								<i class="layui-icon layui-icon-search"></i>
								查询
							</button>
							<button type="reset" class="pear-btn pear-btn-md">
								<i class="layui-icon layui-icon-refresh"></i>
								重置
							</button>
						</div>
					</div>
				</form>
			</div>
		</div>
		<!--中间主体部分-->
		<div class="layui-row">
			<!--左侧菜单树-->
			<div class="layui-col-md2">
				<div class="layui-card" style="margin-right: 15px;overflow: hidden;">
					<div class="layui-card-body">
						<!--树节点容器-->
						<div style="margin-top: 10px;">
							<ul id="menuTree" class="dtree" data-id="0" style="width: 200px;"></ul>
						</div>
					</div>
				</div>
			</div>
			<!--右侧菜单表格-->
			<div class="layui-col-md10">
				<div class="layui-card">
					<div class="layui-card-body">
						<table id="menu-table" lay-filter="menu-table"></table>
					</div>
				</div>
			</div>
		</div>

		<!--添加和修改窗口-->
			<div id="addOrUpdateWindow" style="display: none;padding: 30px;">
				<form class="layui-form" action="" id="dataFrm" lay-filter="dataFrm">
					<!-- 隐藏域，保存用户id -->
					<input type="hidden" name="id" value="">
					<div class="layui-form-item">
						<div class="layui-inline">
							<label class="layui-form-label">父级</label>
							<div class="layui-input-block">
								<!-- 父菜单编号 -->
								<input type="hidden" name="pid" id="pid" value="0">
								<div style="width: 230px;overflow: hidden">
									<ul id="menuSelectTree" class="dtree" data-id="0"></ul>
								</div>
							</div>
						</div>
						<button style="display: inline-block;margin-top: -10px;" type="button" id="resetMenu" class="layui-btn">
							<span class="layui-icon layui-icon-return"></span>重置</button>
					</div>

					<div class="layui-form-item">
						<div class="layui-inline">
							<label class="layui-form-label">名称</label>
							<div class="layui-input-block">
								<input type="text" name="title" lay-verify="required" autocomplete="off" placeholder="请输入名称" class="layui-input">
							</div>
						</div>
						<div class="layui-inline">
							<label class="layui-form-label">编码</label>
							<div class="layui-input-block">
								<input type="text" name="code" value="m:" lay-verify="required" autocomplete="off" placeholder="请输入编码,默认以m:开头!"
											 class="layui-input">
							</div>
						</div>
					</div>

					<div class="layui-form-item">
						<div class="layui-inline">
							<label class="layui-form-label">图标</label>
							<div class="layui-input-block">
								<!--添加隐藏域，保存选中的图标ID-->
								<input type="hidden" name="icon" id="icon" value="layui-icon layui-icon-face-smile">
								<input type="text" name="iconFa" id="iconPicker" lay-filter="iconPicker" autocomplete="off" class="layui-input"/>
							</div>
						</div>
						<div class="layui-inline">
							<label class="layui-form-label">链接</label>
							<div class="layui-input-block">
								<input type="text" name="href" value="/" lay-verify="required" autocomplete="off" placeholder="请输入链接"
											 class="layui-input">
							</div>
						</div>
					</div>

					<div class="layui-form-item">
						<div class="layui-inline">
							<label class="layui-form-label">打开类型</label>
							<div class="layui-input-block">
								<input type="text" name="openType" value="_iframe" autocomplete="off" placeholder="请输入打开类型" class="layui-input">
							</div>
						</div>
						<div class="layui-inline">
							<label class="layui-form-label">折叠</label>
							<div class="layui-input-block">
								<input type="checkbox" value="1" name="spread" lay-skin="switch"
											 lay-text="是|否">
							</div>
						</div>
					</div>

					<div class="layui-form-item layui-form-text">
						<label class="layui-form-label">描述</label>
						<div class="layui-input-block">
							<textarea placeholder="请输入..." name="description" class="layui-textarea"></textarea>
						</div>
					</div>

					<div class="bottom">
						<div class="button-container">
							<button type="button" class="layui-btn layui-btn-normal layui-btn-sm" lay-submit="" lay-filter="doSubmit">
								<i class="layui-icon layui-icon-ok"></i>
								提交
							</button>
							<button type="reset" id="reSetBtn" class="layui-btn layui-btn-primary layui-btn-sm">
								<i class="layui-icon layui-icon-refresh"></i>
								重置
							</button>
						</div>
					</div>
				</form>
			</div>

		<script type="text/html" id="role-toolbar">
			<button class="layui-btn layui-btn-normal layui-btn-sm data-add-btn" lay-event="add"><i class="layui-icon layui-icon-add-1"></i>添加</button>
			<button class="layui-btn layui-btn-normal layui-btn-sm data-add-btn" lay-event="search"><i class="layui-icon layui-icon-search"></i>查询全部</button>
		</script>
		
		<script type="text/html" id="menu-bar">
			<a class="layui-btn layui-btn-xs data-count-edit" lay-event="edit"><i class="layui-icon layui-icon-edit"></i>编辑</a>
			<a class="layui-btn layui-btn-xs layui-btn-danger data-count-delete" lay-event="remove"><i
							class="layui-icon layui-icon-delete"></i>删除</a>
		</script>
		<script src="/pear_layui/component/layui/layui.js"></script>
		<script src="/pear_layui/component/pear/pear.js"></script>
		<script>
				layui.extend({
					//不需要加.js后缀
					dtree:"/pear_layui/layui_ext/dtree/dtree",
					//iconPicker : '/pear_layui/component/pear/modules/iconPicker'
				}).use(['table','form','jquery','dtree','iconPicker'],function () {
		        let table = layui.table;
		        let form = layui.form;
		        let $ = layui.jquery;
		        let dtree = layui.dtree;
		        let iconPicker = layui.iconPicker;
						//定义添加和修改的url 以及弹出层对象
						let url, mainIndex;

		        let cols = [
		            [
										{field: 'id', hide: true},
		                {title: '名称', field: 'title', align:'center'},
		                {title: '编码', field: 'code', align:'center'},
										{title: '等级', field: 'type', align:'center',templet:function (b) {return b.type + '级';}},
										{title: '图标', field: 'icon', align:'center',templet:function (b) {return "<i class='"+b.icon+"'></i>";}},
										{title: '链接', field: 'href', align:'center',width:180},
										{title: '打开类型', field: 'openType', align:'center'},
										//{title: '是否展开', field: 'spread', align:'center'},
										{title: '创建时间', field: 'gmtCreate', align:'center',width: 180,sort: true},
		                {title: '描述', field: 'description', align:'center',templet:function (b) {
		                		if(b.description == null || b.description == ''){
		                			return '暂无';
												}
		                		return b.description;}},
		                {title: '操作', toolbar: '#menu-bar', align:'center',width: 160}
		            ]
		        ];

		        //渲染表格数据
						let tableIns = table.render({
		            elem: '#menu-table',
		            url: '/menu/findMenu',
		            page: true ,
								limit: 8,
								limits: [8, 16, 32, 64, 128, 256, 512],
		            cols: cols ,
		            skin: 'line',
		            toolbar: '#role-toolbar',
		            defaultToolbar: [{
								title: '刷新',
		                layEvent: 'refresh',
		                icon: 'layui-icon-refresh',
		            }, 'filter', 'print', 'exports'],
								done: function (res, curr, count) {
									//判断当前页码是否是大于1并且当前页的数据量为0
									if (curr > 1 && res.data.length == 0) {
										var pageValue = curr - 1;
										//刷新数据表格的数据
										tableIns.reload({
											page: {curr: pageValue}
										});
									}
								}
		        });

						form.on('submit(menu-query)', function(data){
							table.reload('menu-table', {
								where: data.field,
								page: {
									curr: 1
								}
							})
							return false;
						});

					//左侧树形菜单点击事件
					dtree.on("node('menuTree')" ,function(obj){
						tableIns.reload({
							where:{"id":obj.param.nodeId},//其中nodeId是当前选中节点的id值
						});
					});

					table.on('tool(menu-table)', function(obj){
		            if(obj.event === 'remove'){
		                window.remove(obj);
		            } else if(obj.event === 'edit'){
		                window.edit(obj);
		            }
		        });

		        //显示全部菜单
		      table.on('toolbar(menu-table)', function(obj){
		            if(obj.event === 'add'){
		                window.add();
		            }else if(obj.event == 'search'){
		            	//加载全部菜单
									menuTree.reload();
									tableIns.reload({
										where:{"id":''},page: {curr: 1}
									});
								} else if(obj.event === 'refresh'){
		                window.refresh();
		            }
		        });

					//渲染左侧菜单树
					var menuTree = dtree.render({
						elem: "#menuTree",//绑定ul标签的ID属性值
						url: "/menu/loadMenuTree", //请求地址
						dataStyle: "layuiStyle", //使用layui风格的数据格式
						dataFormat: "list", //配置data的风格为list
						response:{message:"msg",statusCode:0}, //修改response中返回数据的定义
						line: true,  // 显示树线
						skin: "zdy",  // 自定义风格
						//nodeIconArray:{"3":{"open":"dtree-icon-xiangxia1","close":"dtree-icon-xiangyou"}},
						leafIconArray:{"11":"dtree-icon-evaluate"},  // 自定义扩展的二级最后一级图标，从11开始
						icon: ["0","11"], // 使用
					});

					//渲染图标选择器
					iconPicker.render({
						elem: '#iconPicker',
						type: 'fontClass',
						search: true,
						page: false,
						limit: 20,
						//点击给图标隐藏域赋值
						click: function(data) {
							console.log(data);
							$("[name='icon']").val('layui-icon ' + data.icon);
						},
						// 渲染成功后的回调
						success: function(d) {
						}
					});

		        //添加菜单
						window.add = function(){
							let loading = layer.load(1);
							mainIndex = layer.open({
								type:1,
								title:"添加菜单",
								area: ["700px", "510px"],//窗口宽高
								content: $("#addOrUpdateWindow"),//引用的内容窗口
								success:function () {
									$("input[name='code']").attr('disabled', false).removeClass('layui-disabled');
									url = '/menu/save';
									layer.close(loading);
									//提交地址
									url = "/menu/save";
									//清空表单数据
									$("#dataFrm")[0].reset();
									//设置默认图标
									iconPicker.checkIcon('iconPicker','layui-icon-face-smile');
								}
							});
		        };

					//渲染添加面板左侧菜单树
					var menuSelectTree = dtree.renderSelect({
						elem: "#menuSelectTree",//绑定ul标签的ID属性值
						url: "/menu/loadMenuTree", //请求地址
						dataStyle: "layuiStyle", //使用layui风格的数据格式
						dataFormat: "list", //配置data的风格为list
						response:{message:"msg",statusCode:0}, //修改response中返回数据的定义
						line: true,  // 显示树线
						skin: "zdy",  // 自定义风格
						menubar: true, //开启菜单栏
						leafIconArray:{"11":"dtree-icon-evaluate"},  // 自定义扩展的二级最后一级图标，从11开始
						icon: ["0","11"], // 使用
						width:180,
						selectTips: '默认菜单等级为0级'
					});

					//重置下拉菜单
					$("#resetMenu").click(function () {
						$("[name='pid']").val('0');
						menuSelectTree.selectResetVal();
					});

					//重置按钮点击
					$('#reSetBtn').click(function () {
						$("#resetMenu").click();
						$("[name='icon']").val('layui-icon layui-icon-face-smile');
						iconPicker.checkIcon('iconPicker','layui-icon-face-smile');
					})

					//编辑菜单
					window.edit = function(obj){
						let rowData = obj.data;
						let loading = layer.load(1);
						mainIndex = layer.open({
							type:1,
							title:"编辑菜单",
							area: ["700px", "510px"],//窗口宽高
							content: $("#addOrUpdateWindow"),//引用的内容窗口
							success:function () {
								$("input[name='code']").attr('disabled', 'disabled').addClass('layui-disabled');
								url = '/menu/edit';
								//清空表单数据
								$("#dataFrm")[0].reset();
								//给修改表单赋值
								form.val('dataFrm',rowData);
								layer.close(loading);
								//回显下拉数的数据
								dtree.dataInit('menuSelectTree',rowData.pid);
								dtree.selectVal('menuSelectTree');
								//如果当前选中节点是一级菜单 则没有父节点 默认显示请选择
								if(rowData.pid == 0){
									menuSelectTree.selectResetVal();
								}
								//icon回显
								iconPicker.checkIcon('iconPicker',rowData.icon);
							}
						});
					};

					//添加修改树形菜单点击事件
					dtree.on("node('menuSelectTree')" ,function(obj){
						$("[name='pid']").val(obj.param.nodeId);
					});

					//监听表单提交事件
					form.on("submit(doSubmit)",function (data) {
						let loading = layer.load(1);
						$.post(url,data.field,function(result){
							layer.close(loading);
							if (result.success) {
								//刷新数据表格
								tableIns.reload();
								//刷新左侧菜单树
								menuTree.reload();
								//刷新下拉菜单树
								menuSelectTree.reload();
								//关闭窗口
								layer.close(mainIndex);
								layer.msg(result.message,{icon:1});
							} else {
								layer.msg(result.message, {icon: 2, anim: 6});
							}
						},"json");
						return false;
					});

					//菜单删除
					window.remove = function(obj){
					  //检查该菜单是否有子节点
					  $.post("/menu/checkHasChildrenNode/"+obj.data['id'],function (result) {
              if(!result.exist){
                layer.confirm('确定要删除名称为'+ obj.data['title'] +'的菜单及所属角色关系表中的数据吗？', {icon: 3, title:'提示'}, function(index){
                  let loading = layer.load(1);
                  $.post("/menu/delete/" + obj.data['id'],function (result) {
                    layer.close(loading);
                    if(result.success){
                      layer.close(index);
                      tableIns.reload();
                      //刷新左侧菜单树
                      menuTree.reload();
                      //刷新下拉菜单树
                      menuSelectTree.reload();
                      layer.msg(result.message,{icon:1});
                    }else{
                      layer.msg(result.message,{icon:2,anim:6});
                    }
                  },'json');
                });
              }else{
                layer.alert(result.message,{icon:0});
              }
					  },'json');
					};

		        window.refresh = function(){
		            table.reload('menu-table');
		        }
		        //点击任意地方关闭下拉数组件
					$("body").on("click", function(event){
						$("div[dtree-id][dtree-select]").removeClass("layui-form-selected");
						$("div[dtree-id][dtree-card]").removeClass("dtree-select-show layui-anim layui-anim-upbit");
					});
		    })
		</script>
	</body>
</html>
